<!DOCTYPE html>
<html lang="en" xmlns:th="https//www.thymeleaf.org"；
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{app.name}">企业云盘项目</title>
    <script th:inline="javascript">
        $(function () {
            // 新增缩放按钮点击事件
            $("#nav-toggle").click(function () {
                // 切换logo显示状态
                $("header img").toggle();
                // 切换语言导航显示状态（不影响个人信息导航）
                $("header nav:not(#gd-user-info-id)").toggle();
                // 切换按钮图标
                $(this).find("i").toggleClass("glyphicon-resize-small glyphicon-resize-large");
            });
            $("#gd-user-btn-id").click(function (event) {
                event.stopPropagation()
                $("#gd-user-info-id > ul").removeClass("hidden")
            })

            $("body").click(function () {
                $("#gd-user-info-id > ul").addClass("hidden")
            })

            $("ul#gd-sys-menu-id > li").click(function () {
                $("ul#gd-sys-menu-id > li").removeClass('active')
                $(this).addClass('active')
                $(".service-menu").removeClass('in')
                var forid = $(this).attr("forid")
                $("#" + forid).addClass("in")
            })

            $("ul#gd-sys-menu-id > li:first").click()

            $("ul.menu-level3 > li").click(function () {
                $("ul.menu-level3 > li").removeClass("focus")
                $(this).addClass("focus")
            })

            $("#modify-profile-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{common.message.tip}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            })

            $("#modify-profile-password-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{common.message.tip}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            })

            //
            // $(".modify-profile-btn").click(function(e) {
            //     e.preventDefault();
            //     $("#modify-profile-dialog-id").show();
            // });
            //
            // $(".close-dialog").click(function() {
            //     $("#modify-profile-dialog-id").hide();
            // });






        })//ready function

        function modifyUserInfo() {
            $("#modify-profile-dialog-id").dialog('open')
        }

        function modifypassword() {
            $("#modify-profile-password-id").dialog('open')
        }



    </script>
    <style>
        body{
            display: flex;
            flex-direction: column;

        }

        body > header {
            display: flex;
            width: 100%;
            justify-content: space-between;
            padding: 10px;
            align-items: center;
            height: 100px;
        }

        body > header > img {
            height: 80px
        }

        body > header > nav {
            width: 150px;
            display: flex;
            justify-content: space-between;
            padding-right: 20px;
        }

        body > section {
            width: 100%;
            flex-grow: 1;
            display: flex;
        }

        body > section > nav {
            flex-basis: 130px;
            height: 100%;
            border-right: 1px solid #ddd;
            margin-top: 20px;
        }

        body > section > iframe {
            flex-grow: 1;
            height: 100%;
            border-width: 0;
        }

        #gd-user-info-id {
            position: absolute;
            top: 33px;
            right: 90px;
            width: 160px;
            display: flex;
            flex-direction: column;
            align-items: start;
        }

        .menu-level3 > li {
            margin-left: 13px;
        }

        .fade {
            display: none;
        }

        .fade.in {
            display: block;
        }

        ul.menu-level3 > li.focus {
            background-color: #dfd;
        }

        /* 用户信息修改弹窗样式 */
        .dialog-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        /* 修改密码弹窗样式 */
        .dialog-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

    </style>
</head>
<body>

<header>
    <!-- 新增缩放按钮 -->
    <button id="nav-toggle" class="btn" style="margin-right: 10px;">
        <i class="glyphicon glyphicon-resize-small"></i>
    </button>


    <img th:if="${session.lang} eq 'en'" th:src="@{/assets/images/logo_en.png}" >
    <img th:unless="${session.lang} eq 'en'" th:src="@{/assets/images/logo_zh.png}">

    <nav>
        <a th:href="@{/(lang=en)}" th:text="#{login.english}"></a>
        <a th:href="@{/(lang=zh)}" th:text="#{login.chinese}"></a>
    </nav>

    <nav></nav>

    <nav id="gd-user-info-id">

        <a id='gd-user-btn-id' href="#" class="btn">
            <i class="glyphicon glyphicon-user"></i>
            <span th:if="${session.lang} eq 'en'" sec:authentication="principal.username"></span>
        </a>

        <ul class="nav navbar-btn hidden">
            <li>
                <a href="#" onclick="modifyUserInfo()">
                    <i class="glyphicon glyphicon-king"></i>
                    <span th:text="#{main.user.modify}"></span>
                </a>
            </li>

            <li>
                <a href="#" onclick="modifypassword()">
                    <i class="glyphicon glyphicon-phone"></i>
                    <span th:text="#{main.passwd.modify}"></span>
                </a>
            </li>

            <li>
                <a th:href="@{/logout}">
                    <i class="glyphicon glyphicon-off"></i>
                    <span th:text="#{main.user.logout}"></span>
                </a>
            </li>
        </ul>
    </nav>
</header>

<ul id="gd-sys-menu-id" class="nav nav-tabs">
    <li th:each="item:${session.menuList}" th:forid="${'service-menu-' + item.menuId}">
        <a href="#">
            <i th:class="${item.menuIcon}"></i>
            <span th:text="${item.menuName}"></span>
        </a>
    </li>
</ul>

<section>
    <nav>
        <ul class="service-menu nav navbar-btn tab-pane fade" th:each="menu1 :${session.menuList}" th:id="${'service-menu-' + menu1.menuId}">
            <li th:each="menu2:${menu1.child}">
                <a href="#">
                    <i th:class="${menu2.menuIcon}"></i>
                    <span th:text="${menu2.menuName}"></span>
                </a>
                <ul class="nav navbar-btn menu-level3">
                    <li th:each="menu3:${menu2.child}">
                        <a th:href="${menu3.getMenuUrl()}" target="contents">
                            <i th:class="${menu3.menuIcon}"></i>
                            <span th:text="${menu3.menuName}"></span>
                        </a>
                    </li>
                </ul>
            </li>

        </ul>

    </nav>
    <iframe name="contents" th:src="@{/welcomePage}"></iframe>

</section>



<div id="modify-profile-dialog-id" style="display: none;">
    <form id="dialog-profile-form">
        <div class="form-group">
            <label class="form-label">用户名</label>
            <input type="text" class="form-control">
        </div>
        <div class="form-group">
            <label >昵称</label>
            <input class="form-control">
        </div>
        <div class="form-group">
            <label class="form-label">邮箱</label>
            <input class="form-control">
        </div>
        <div class="form-group">
            <label class="form-label">手机号</label>
            <input class="form-control">

        </div>

    </form>
</div>
</div>


<div id="modify-profile-password-id" style="display: none;">
    <form id="dialog-profile-phone">
        <div class="form-group">
            <label class="form-label">原密码</label>
            <input type="text" class="form-control">
        </div>
        <div class="form-group">
            <label >新密码</label>
            <input class="form-control">
        </div>
        <div class="form-group">
            <label class="form-label">确认密码</label>
            <input class="form-control">
        </div>

    </form>
</div>
</div>



<!-- 重置密码模态框 -->
<div id="resetPasswordModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3><i class="fas fa-redo"></i> 重置密码</h3>
            <button class="close-btn" id="closeResetModal">&times;</button>
        </div>
        <div class="modal-body">
            <div class="input-group">
                <label for="resetUserId"><i class="fas fa-user"></i> 用户ID</label>
                <input type="text" id="resetUserId" placeholder="请输入要重置密码的用户ID（多个用逗号分隔）">
            </div>
            <div class="input-group">
                <label for="resetNewPassword"><i class="fas fa-key"></i> 新密码</label>
                <input type="password" id="resetNewPassword" placeholder="请输入新密码">
                <i class="fas fa-eye" id="toggleResetPassword"></i>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-cancel" id="cancelResetBtn">取消</button>
            <button class="btn btn-submit" id="confirmResetBtn" disabled>确认重置</button>
        </div>
    </div>
</div>

<!-- 触发按钮 -->
<button id="resetPasswordBtn" class="btn-reset-password">
    <i class="fas fa-redo"></i> 重置密码
</button>

<script>
    // 获取DOM元素
    const resetPasswordBtn = document.getElementById('resetPasswordBtn');
    const resetPasswordModal = document.getElementById('resetPasswordModal');
    const closeResetModal = document.getElementById('closeResetModal');
    const cancelResetBtn = document.getElementById('cancelResetBtn');
    const confirmResetBtn = document.getElementById('confirmResetBtn');
    const resetUserId = document.getElementById('resetUserId');
    const resetNewPassword = document.getElementById('resetNewPassword');
    const toggleResetPassword = document.getElementById('toggleResetPassword');

    // 打开重置密码模态框
    resetPasswordBtn.addEventListener('click', function() {
        resetPasswordModal.style.display = 'flex';
        document.body.style.overflow = 'hidden';
        resetResetForm();
    });

    // 关闭模态框
    function closeResetPasswordModal() {
        resetPasswordModal.style.display = 'none';
        document.body.style.overflow = 'auto';
    }

    closeResetModal.addEventListener('click', closeResetPasswordModal);
    cancelResetBtn.addEventListener('click', closeResetPasswordModal);

    // 点击模态框外部关闭
    window.addEventListener('click', function(event) {
        if (event.target === resetPasswordModal) {
            closeResetPasswordModal();
        }
    });

    // 切换密码可见性
    toggleResetPassword.addEventListener('click', function() {
        togglePasswordVisibility(resetNewPassword, this);
    });

    // 表单验证
    function validateResetForm() {
        const isUserIdValid = resetUserId.value.trim() !== '';
        const isNewPasswordValid = resetNewPassword.value.length >= 8;
        confirmResetBtn.disabled = !(isUserIdValid && isNewPasswordValid);
    }

    // 重置表单
    function resetResetForm() {
        resetUserId.value = '';
        resetNewPassword.value = '';
        confirmResetBtn.disabled = true;
    }

    // 输入事件监听
    resetUserId.addEventListener('input', validateResetForm);
    resetNewPassword.addEventListener('input', validateResetForm);

    // 提交重置请求
    confirmResetBtn.addEventListener('click', function() {
        confirmResetBtn.disabled = true;
        confirmResetBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 处理中...';

        // 构建请求数据
        const userUuids = resetUserId.value.trim();
        const newPassword = resetNewPassword.value;

        // 发送AJAX请求
        fetch('/user/resetPassword', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: `userUuids=${encodeURIComponent(userUuids)}&newPassword=${encodeURIComponent(newPassword)}`
        })
            .then(response => response.json())
    .then(data => {
            if (data.success) {
            alert('密码重置成功');
            closeResetPasswordModal();
        } else {
            alert('重置失败: ' + data.msg);
        }
    })
    .catch(error => {
            alert('请求失败: ' + error.message);
    })
    .finally(() => {
            confirmResetBtn.innerHTML = '确认重置';
        confirmResetBtn.disabled = false;
    });
    });
</script>

</body>
</html>